<template>
  <div class="mytalk">
    <div class="top">
      <i class="iconfont icon-fanhui fanhui" @click="back"></i>
      <span class="title">设置</span>
    </div>
    <div class="nav">
      <div class="nav-item" v-for="(item,index) in navList">
        <span :class="item === selectedNav?'selected':''" @click="changeNav(index)">{{item}}</span>
      </div>
    </div>
    <div class="daipingjia" v-if="selectedNav === '待评价'">
      <div class="message-list" v-for="(item,index) in chatList" @click="goToDetail(item.id)">
        <div class="avatar-wrapper">
          <img :src="item.img" />
        </div>
        <div class="content-list">
          <div class="message-wrapper">
            <span class="name">{{item.name}}</span>
            <span class="time">{{item.time}}</span>
          </div>
          <div>{{item.message}}</div>
        </div>
      </div>
    </div>

    <div class="yipingjia" v-if="selectedNav === '已评价'">
      <div class="message-list" v-for="(item,index) in chatList1" @click="goToDetail(item.id)">
        <div class="avatar-wrapper">
          <img :src="item.img" />
        </div>
        <div class="content-list">
          <div class="message-wrapper">
            <span class="name">{{item.name}}</span>
            <span class="time">{{item.time}}</span>
          </div>
          <div>{{item.message}}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  export default {

    data() {
      return {
        navList: ['待评价', '已评价'],
        selectedNav: '待评价',
        chatList:[{
        id:1,
        img:require("../static/img/聊天图像1.png"),
        name:"小白",
        time:"21：00",
       message:"学不会"
      }],
       chatList1:[{
        id:1,
        img:require("../static/img/聊天图像2.png"),
        name:"小白",
        time:"19：00",
       message:"好好卡技能"
      }]
      }
    },
    methods: {
      back() {
        this.$router.go(-1)
      },
      changeNav(index) {
        this.selectedNav = this.navList[index]
      }
    }
  }

</script>

<style scoped>
  .top {
    display: flex;
    align-items: center;
    padding: 10px 0;
  }

  .daipingjia{
    position: relative;
    margin-top: 15px;
  }

  .yipingjia{
    position: relative;
    margin-top: 15px;
  }
  
  .top .fanhui {
    flex: 0 0 25px;
    color: #ccc;
    font-weight: bold;
    margin-left: 15px;
  }
  
  .top .title {
    flex: 1;
    text-align: center;
    margin-left: -15px;
  }
  
  .nav {
    display: flex;
    text-align: center;
  }
  
  .nav .nav-item {
    flex: 1;
    display: inline-block;
  }
  
  .selected {
    border-bottom: 2px solid #06cd56;
    color: #06cd56;
    padding-bottom: 5px;
  }

  body{
}
.message-list{
  position: relative;
  display: flex;
  background: white;
  padding:10px 15px;
}

.message-list::after{
  position: absolute;
  content: "";
  width: 100%;
  left: 0;
  bottom: 0;
  border-top: 1px solid #eee;
}
.message-wrapper{
  position: relative;
  margin-top: 6px;
}
.message-list .avatar-wrapper{
  position: relative;
  flex: 0 0 100px;
  margin-right: 10px;
}

.message-list  .content-list{
  position: relative;
  flex: auto;
}

.message-list  .content-list .name{
  position: relative;
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 10px;
}

.message-list  .content-list .time{
  position: relative;
  top: 6px;
  float: right;
  font-size: 12px;
  margin-bottom: 10px;
}
</style>